<!--
 * @Author: zj
 * @LastEditors: JESS
 * @Date: 2022-06-14 15:41:42
 * @LastEditTime: 2022-08-03 14:04:03
-->
<template>
  <div class="congestion-content content-border-bg content-fade-left">
    <div class="title-img"> <p>综合交通分析</p> </div>
    <!-- <div class="road-contrast">
      <div class="contrast-top">
        <p class="title">拥堵占比</p>
      </div>
      <div id="container"></div>
    </div> -->
    <div class="contrast-top">
      <p class="title">各路段拥堵排名</p>
      <el-table :data="tableData" size="small" style="margin-top: 10px">
        <el-table-column type="index" width="60" align="center" label="排名" />
        <el-table-column prop="name" align="center" label="名称" />
        <el-table-column prop="num" align="center" label="拥堵指数" />
        <el-table-column prop="sudu" align="center" label="速度" />
        <el-table-column prop="ziyou" align="center" label="自由流" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
  import { onMounted } from 'vue';
  import HighCharts from 'highcharts';
  import highcharts3d from 'highcharts/highcharts-3d';

  highcharts3d(HighCharts);

  const tableData = [
    {
      name: '兰陵路',
      num: '1.99',
      sudu: '5.6',
      ziyou: '45.46',
    },
    {
      name: '兰陵路',
      num: '1.99',
      sudu: '5.6',
      ziyou: '45.46',
    },
    {
      name: '兰陵路',
      num: '1.99',
      sudu: '5.6',
      ziyou: '45.46',
    },
    {
      name: '兰陵路',
      num: '1.99',
      sudu: '5.6',
      ziyou: '45.46',
    },
    {
      name: '兰陵路',
      num: '1.99',
      sudu: '5.6',
      ziyou: '45.46',
    },
    {
      name: '兰陵路',
      num: '1.99',
      sudu: '5.6',
      ziyou: '45.46',
    },
    {
      name: '兰陵路',
      num: '1.99',
      sudu: '5.6',
      ziyou: '45.46',
    },
    {
      name: '兰陵路',
      num: '1.99',
      sudu: '5.6',
      ziyou: '45.46',
    },
    {
      name: '兰陵路',
      num: '1.99',
      sudu: '5.6',
      ziyou: '45.46',
    },

    {
      name: '兰陵路',
      num: '1.99',
      sudu: '5.6',
      ziyou: '45.46',
    },
  ];

  onMounted(() => {
    // HighCharts.chart('container', options.value);
  });
</script>

<style scoped lang="less">
  .congestion-content {
    position: absolute;
    z-index: 3;
    top: 9%;
    width: 25%;
    height: 89%;
  }
  .contrast-top {
    width: 100%;
    height: 25px;
    background: url(@/assets/images/basic/roadInfo.png) no-repeat;
    .title {
      font-size: 16px;
      margin-left: 21px;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      color: #ffffff;
      line-height: 18px;
      text-shadow: 0px 0px 6px #1fa3ff;
    }
  }
  .title-img {
    width: 400px;
    height: 50px;
    background-size: 108% 100%;
    background: url(@/assets/images/组\ 102.png) no-repeat;
    p {
      padding-top: 11px;
      padding-left: 5px;
      font-size: 20px;
      margin-left: 21px;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      color: #ffffff;
      line-height: 18px;
      text-shadow: 0px 0px 6px #1fa3ff;
    }
  }
  #container {
    position: relative;
    left: -50px;
    width: 400px;
    height: 200px;
  }
  :deep .el-table__inner-wrapper::before {
    background-color: transparent !important;
  }
  :deep .el-input__wrapper {
    background: transparent !important;
    color: white;
  }
  :deep .el-input__wrapper {
    background-color: #ffffff00;
    box-shadow: 0px 0px 0px;
  }
  :deep .el-select {
    --el-select-border-color-hover: none;
    --el-select-input-focus-border-color: none;
  }
  .mymap-container {
    color: white;
  }
  :deep .el-table,
  .el-table__expanded-cell {
    background-color: transparent;
    color: #fff;
  }

  .el-table::before {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0px;
  }

  :deep .el-table tr {
    background-color: transparent !important;
  }

  :deep .el-table tr:hover > td {
    background-color: transparent !important;
  }

  :deep .el-table th {
    background-color: transparent !important;
    border-bottom: none !important;
    color: #fff;
  }

  :deep .el-table--enable-row-transition .el-table__body td,
  .el-table .cell {
    background-color: transparent;
    border-bottom: none !important;
  }
</style>
